<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:align="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <th:block th:include="include :: header(#{system.user.title})" />
  <link rel="stylesheet" href="/static/css/jkanban.css" />
  <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet"/>
  <style>
    body {
      font-family: "Lato";
      margin: 0;
      padding: 0;
    }

    myKanban {
      overflow-x: auto;
      padding: 20px 0;
    }

    .success {
      background: #00b961;
    }

    .info {
      background: #2a92bf;
    }

    .warning {
      background: #f4ce46;
    }

    .error {
      background: #fb7d44;
    }

    .custom-button {
      background-color: #4CAF50;
      border: none;
      color: white;
      padding: 7px 15px;
      margin: 10px;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      font-size: 16px;
    }
  </style>
</head>

<body class="gray-bg">
<div class="row m-b-30">
  <div class="col-md-12">
    <div class="col-sm-12 select-table table-striped">
      <table id="bootstrap-table">
        <div id="demo2">
          <div  class="kanban-container" style="width: 990px;">
            <div id="1" data-id="_todo" class="kanban-board" style="width: 250px; margin-left: 40px; margin-right: 40px;"></div>
            <div id="2" data-id="_working" class="kanban-board" style="width: 250px; margin-left: 40px; margin-right: 40px;"></div>
            <div id="3" data-id="_done" class="kanban-board" style="width: 250px; margin-left: 40px; margin-right: 40px;"></div>
          </div>
        </div>
      </table>
    </div>
  </div>
</div>
<th:block th:include="include :: footer" />
<script src="/static/js/jkanban.js"></script>
<script async="" src="https://www.google-analytics.com/analytics.js"></script>
<script th:inline="javascript">

  var tasks = [[${tasks}]]
  var content = ""
  var status
  var id
  var length = tasks.length
  var target_board;
  var res = {
    'id' : id,
    'status' : status
  }
  var board_todo = {
    'id' : '_todo',
    'title'  : '未开始',
    'class' : 'success',
    'item'  : []
  };
  var board_working = {
    'id' : '_working',
    'title'  : '进行中',
    'class' : 'warning',
    'item'  : []
  }
  var board_done = {
    'id' : '_done',
    'title'  : '已完成',
    'class' : 'info',
    'item'  : []
  }

  for (let i = 0; i < length; i++) {
    var task = tasks[i].priority+ " : " + tasks[i].type + " : " + tasks[i].taskName
    if (tasks[i].status === 0)
      board_todo.item[board_todo.item.length] = {
        'title' : task
      }
    if (tasks[i].status === 1)
      board_working.item[board_working.item.length] = {
        'title' : task
      }
    if (tasks[i].status === 2)
      board_done.item[board_done.item.length] = {
        'title' : task
      }
  }

  var kanban2 = new jKanban({
    element : '#demo2',
    gutter  : '40px',
    widthBoard : '350px',
    context : function(el){
      content = el.innerText
      for (let i = 0;i < length;i++){
        if (tasks[i].priority+ " : " + tasks[i].type + " : " + tasks[i].taskName === content){
          id = tasks[i].id
        }
      }
      $.modal.open("任务信息","/system/task/edit/" + id)
    },
    boards  :[
      board_todo
      ,
      board_working
      ,
      board_done
    ],
    dropEl: function (el, target, source, sibling){
      content = el.innerText
      target_board = kanban2.getParentBoardID(el)
      for (let i = 0;i < length;i++){
        if (tasks[i].priority+ " : " + tasks[i].type + " : " + tasks[i].taskName === content){
          id = tasks[i].id
          if (target_board === '_todo') status = 0
          if (target_board === '_working') status = 1
          if (target_board === '_done') status = 2
          break
        }
      }
      res.id = id
      res.status = status
      console.log(res.id)
      console.log(res.status)
      $.ajax({
        url:  "updateStatus",
        type: "POST",
        data: {
          'id' : id,
          'status' : status
        },
        success: function(){
          console.log(res)
        }
      })
    }
  });



</script>
</body>
</html>